<template>
	<view class="current">
		<view class="header">
			<view class="header1">
				<view class="headl">零钱理财</view>
				<view class="headr">超500,000+人购买</view>
			</view>
			<view class="header2">收益稳健，轻松理财，申赎灵活，使用方便；严控风险，省心之选；精品热销，先到先得</view>
			<view class="header3">
				<image src="https://z3.ax1x.com/2021/05/07/g10mOx.png" mode=""></image>
				<text>为您甄选</text>
				<text>活期精品</text>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="gdcf" lower-threshold='150'>
			<view class="swiper-tab" v-for="item in currentData" :key='item.code'>
				<view class="swiper-item1">
					<view class="swiper-top">
						<view class="swiper-top1">{{item.name}}</view>
						<view class="swiper-top2">{{item.type}}</view>
					</view>
					<view class="swiper-button">
						<view class="swiper-button1">
							<view class="swiper1">{{item.sevenDaysYearIncome}}%</view>
							<view class="swiper2">七日年化收益率</view>
						</view>
						<view class="swiper-button1">
							<view class="swiper3">{{item.payType}}</view>
							<view class="swiper4">基金经理：{{item.manager}}</view>
						</view>
						<view class="swiper-button2">
							<button class="but" type="default" @click="currentDetails(item.id)">立即购买</button>
						</view>
					</view>
				</view>
				<view class="instructions">销售额：{{item.fundScale}}</view>

			</view>
		</scroll-view>
		<view class="footer">
			· 过往业绩不预士未来表现，市场有风险，投资需谨慎
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers(
		"current"
	);


	export default {
		data() {
			return {
				//页码
				page: 1,
				currentData: [],
				//总条数
				total: 0
			}
		},
		mounted() {
			this.getCurrent()
		},
		methods: {
			...mapActions(['getCurrentByPage']),

			//跳转详情页面
			currentDetails(id) {
				uni.navigateTo({
					url:'../currentDetails/currentDetails?id='+id
				});
			},

			//获取1页10条活期数据
			async getCurrent() {
				const data = await this.getCurrentByPage(this.page)
				if (data.code == 200) {
					// 数据赋值
					this.currentData = data.data.list
					// 总条数赋值
					this.total = data.data.total
				}
				
			},
			// 最底部触发
			async gdcf() {
				this.page++
				const data = await this.getCurrentByPage(
					this.page
				)
				
				if ( this.currentData.length<this.total) {
					if (data.code == 200) {
						
						// 数据赋值
						this.currentData = [...this.currentData, ...data.data.list]
					}
				} else {
					uni.showToast({
						title: '没有更多了',
						duration: 2000
					})
				}

			}
		}
	}
</script>

<style>
	.current {
		padding: 20rpx;
	}

	.header .header1 {
		display: flex;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		justify-content: space-between;
	}

	.header .header1 .headl {
		font-size: 42rpx;
		font-weight: 600;
	}

	.header .header1 .headr {
		font-size: 24rpx;
	}

	.header .header2 {
		margin-top: 10rpx;
		width: 100%;
		height: 80rpx;
		color: #999999;
		font-size: 30rpx;
	}

	.header .header3 {
		margin-top: 30rpx;
		height: 54rpx;
		display: flex;
		align-items: center;
		background-color: #feeeee;
		color: #f85656;
	}

	.header .header3 image {
		width: 54rpx;
		height: 54rpx;
	}

	.header .header3 text {
		margin-left: 20rpx;
		line-height: 54rpx;
	}

	.swiper-tab {
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.05);
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.scroll {
		height: 100vh;
	}

	.swiper-item1 {
		width: 650rpx;
		height: 188rpx;
		border-bottom: 0.2rpx solid #C0C0C0;

	}

	.swiper-top {
		display: flex;
		margin-top: 20rpx;
	}

	.swiper-top .swiper-top1 {
		font-size: 32rpx;
		font-weight: 600;
	}

	.swiper-top .swiper-top2 {
		margin-left: 10rpx;
		font-size: 20rpx;
		width: 102rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		background-color: #fcf5ec;
		color: #be7f22;
	}

	.swiper-button {
		width: 700rpx;
		height: 142rpx;
		display: flex;
	}

	.swiper-button .swiper-button1 {
		width: 210rpx;

	}

	.swiper-button .swiper-button1 .swiper1 {
		font-size: 44rpx;
		color: #f85656;
		margin-top: 26rpx;
		font-weight: 600;
	}

	.swiper-button .swiper-button1 .swiper2 {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.swiper-button .swiper-button1 .swiper3 {
		font-size: 32rpx;
		margin-top: 35rpx;
		font-weight: 600;
	}

	.swiper-button .swiper-button1 .swiper4 {
		margin-top: 18rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.swiper-button .swiper-button2 {
		margin-top: 30rpx;
		width: 180rpx;
		height: 60rpx;
	}

	.swiper-button .swiper-button2 .but {
		width: 180rpx;
		height: 74rpx;
		background-color: #3476F1;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.instructions {
		margin-bottom: 10rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 6px;
		margin-top: 13rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.footer {
		margin-top: 40rpx;
		padding-left: 16rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
	}
</style>
